<template>
		  <view class="container">
		    <scroll-view class="list-scroll" scroll-y>
		      <view 
		        v-for="(item, index) in listData" 
		        :key="index" 
		        class="data-card"
		        :style="{borderLeft: `6rpx solid ${getRandomColor(index)}`}" @click="oricalRecordsFn(item)" @longpress="delHistory(item)"
		      >
		        <view class="card-content">
		          <!-- 左侧信息 -->
		          <view class="left-info">
		            <view class="water-icon" :style="{backgroundColor: getRandomColor(index) + '20'}">
		            </view>
		            <view class="text-info">
		              <text class="title">{{item.measuringArr.length}}条测线</text>
		              <text class="time">{{item.timeCL}}</text>
		            </view>
		          </view>
		          
		          <!-- 右侧数据 -->
		          <view class="right-data">
		            <view class="data-item">
		              <text class="label">水深</text>
		              <text class="value">{{item.wD}}</text>
		            </view>
		            <view class="data-item">
		              <text class="label">流量</text>
		              <text class="value">{{item.liusliangnub}}</text>
		            </view>
		          </view>
		        </view>
		      </view>
		    </scroll-view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="error" cancelText="关闭" confirmText="删除" title="警告" content="是否删除历史记录，此操作不可恢复！"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		  </view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [],
				cezhanID: '', //id
				  colorPalette: [
				        "#3498db", // 蓝色
				        "#2ecc71", // 绿色
				        "#e67e22", // 橙色
				        "#9b59b6", // 紫色
				        "#1abc9c", // 蓝绿色
				        "#f1c40f", // 黄色
				        "#e74c3c", // 红色
				        "#34495e"  // 深蓝色
				      ]
			}
		},
		onLoad() {
			this.trafficList()
		},
		methods: {
			// 流量列表
			trafficList() {
				this.listData = this.vuex_flowHistory
				console.log('this.listData', this.listData);
			},
			// 跳转
			oricalRecordsFn(i){
				// 历史详情
				uni.navigateTo({
					url:'/pages/record/historicalRecords?id=' + i.id,
				})
			},
			// 长按删除
			delHistory(i) {
				console.log(i);
				this.cezhanID = i.id
				this.$refs.alertDialog.open()
				
			},
			dialogConfirm() {
				console.log('点击确认')
				this.cezhanitem(this.cezhanID)
			},
			dialogClose() {
				console.log('点击关闭')
			},
			// 删除ID
			cezhanitem(id) {
				let it = id
				let arr = this.vuex_flowHistory
				let index = arr.findIndex(item => item.id == it);
				if (index !== -1) {
					arr.splice(index, 1);
				}
				this.cezhanlist = arr
				uni.$u.vuex('vuex_flowHistory', arr)
			},
			    getRandomColor(index) {
			      // 根据索引取模确保颜色循环使用
			      return this.colorPalette[index % this.colorPalette.length];
			    }
		}
	}
</script>
<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f8fafc;
  height: 100vh;
  box-sizing: border-box;
  
  .list-scroll {
    height: 100%;
    
    .data-card {
      background-color: #fff;
      border-radius: 16rpx;
      padding: 24rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      
      .card-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .left-info {
          display: flex;
          align-items: center;
          
          .water-icon {
            width: 30rpx;
            height: 60rpx;
            border-radius: 16rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20rpx;
            
            image {
              width: 36rpx;
              height: 36rpx;
            }
          }
          
          .text-info {
            .title {
              font-size: 32rpx;
              font-weight: 500;
              color: #333;
              display: block;
              margin-bottom: 4rpx;
            }
            
            .time {
              font-size: 26rpx;
              color: #94a3b8;
            }
          }
        }
        
        .right-data {
          display: flex;
          
          .data-item {
            margin-left: 30rpx;
            text-align: right;
            
            .label {
				text-align: center;
              font-size: 28rpx;
              color: #64748b;
              display: block;
              margin-bottom: 6rpx;
            }
            
            .value {
				text-align: center;
              font-size: 38rpx;
              font-weight: 600;
              color: #3768c2;
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>